<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-qrcodeUrl="{ scope }">
				<el-image style="width: 100px; height: 100px" :src="scope.row.qrcodeUrl"></el-image>
				<el-button size="mini" @click="downloadCodeImg(scope.row.qrcodeUrl)"
					>下载二维码</el-button
				>
			</template>
			<template #table-column-qrcodeCircleUrl="{ scope }">
				<el-image
					style="width: 100px; height: 100px"
					:src="scope.row.qrcodeCircleUrl"
				></el-image>
				<el-button size="mini" @click="downloadCodeImg(scope.row.qrcodeCircleUrl)"
					>下载二维码</el-button
				>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.jljWechatReport)
				.set('dict', {
					api: {
						page: 'getChannel'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '渠道名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '推广二维码',
							prop: 'qrcodeUrl',
							align: 'center',
							width: 200
						},
						{
							label: '小程序二维码',
							prop: 'qrcodeCircleUrl',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})

				.set('layout', [['refresh-btn', 'flex1', 'search-key'], ['data-table']])
				.on('refresh', async (params, { next, render }) => {
					const data = await next({ ...params });
					render(data);
				})
				.done();

			app.refresh();
		},
		downloadCodeImg(url) {
			var a = document.createElement('a');
			a.download = name || 'pic';
			// 设置图片地址
			a.href = url;
			a.click();
		}
	}
};
</script>
<style lang="scss" scoped></style>
